<template>
    <div>
        <!-- 添加按钮 -->
        <div class="add">
            <el-button type="primary" @click="add">添加</el-button>
            <Dialog ref="child"></Dialog>
        </div>
        <!-- 表格 -->
        <div class="cable">
            <el-table :data="advList" style="width: 100%" max-height="440">
                <el-table-column prop="id" label="ID" width="180" />

                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column label="图片">
                    <template #default="scope">
                        <img :src="scope.row.img_path" alt="" height="60px">
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="180" />
                <el-table-column label="启用禁用">
                    <template #default="scope">
                        <el-switch v-model="scope.row.flag" />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click="dialogShow(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="centerDialogVisible" title="确定要删除吗" width="500" align-center>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="del(delId)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Dialog from "../../components/advdialog.vue"
import instance from '../../utils/request';
import { ElMessage } from 'element-plus';

const centerDialogVisible = ref(false)
const child = ref(null)
const delId = ref(0)

const advList = ref([
    // { id: "769", title: "巧克力与众不同的味道", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 1, flag: true },
    // { id: "770", title: "登录logo", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 1, flag: true },
    // { id: "776", title: "良品铺子", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 4, flag: true },
    // { id: "779", title: "三只松鼠", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 1, flag: true },
    // { id: "777", title: "喜之郎果冻", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 2, flag: false },
    // { id: "778", title: "士力架", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 4, flag: true },
    // { id: "780", title: "才感翻跟头", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 10, flag: true },
    // { id: "775", title: "中国的辣条，世界的味道", img: "https://pic2.zhimg.com/v2-265b889d760f108e7a705ca4eb4d54c1_r.jpg?source=1940ef5c", sort: 1, flag: true },
])

const add = () => {
    child.value.showdialog()
}

const handleEdit = (row) => {
    child.value.showdialog(row)
}
const getAdvData = async () => {
    const res = await instance.get('advert/advList')
    if (res.code == 200) {
        advList.value = res.data
        console.log(res.data);

    }
}
const dialogShow = (id) => {
    centerDialogVisible.value = true
    delId.value = id
}
const del = async (id) => {
    centerDialogVisible.value = false
    let res = await instance.get(`Advert/deleteAdv?id=${id}`)
    if (res.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }
    getAdvData()
}
onMounted(() => {
    getAdvData()
})

</script>

<style lang="scss" scoped>
.add {
    margin-bottom: 20px;
}
</style>